<template>
    <div class="product-comment normal-text after-line">
        <div class="meta clearfix">
            <span>{{name}}</span>
            <span class="icon" v-for="(item, index) in (score + 1)"
                :key="index">
                &#xe60b;
            </span>
            <span class="fr small-text second-font-color">{{time}}</span>
        </div>
        <div class="content">
            {{content}}
        </div>
        <div v-if="images" class="image-wrap">
            <div v-for="(image, index) in images"
                :key="index"
                :style="{'background-image': 'url(' + image + ')'}"
                class="image"
                @click="onClickImage(image)">
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Comment',
    props: {
        name: {
            type: String,
            default: '',
        },
        time: {
            type: String,
        },
        content: {
            type: String,
        },
        images: {
            type: Array,
            default() {
                return [];
            },
        },
        score: {
            required: true,
            type: Number,
        },
    },
    methods: {
        /**
         * 点击图片
         */
        onClickImage(url) {
            wx.previewImage({
                current: url,
                urls: this.images,
            });
        },
    },
};
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.product-comment {
    position: relative;
    padding: 12rpx 30rpx;
    .meta {
        padding: 6rpx 0;
        .icon {
            margin-left: -4rpx;
            color: @score-color;
        }
    }
    .content {
        padding: 6rpx 0;
    }
    .image-wrap {
        padding-top: 10px;
        white-space: nowrap;
        overflow-x: scroll;
        .image {
            display: inline-block;
            width: 140rpx;
            height: 140rpx;
            margin-right: 16rpx;
            background: center no-repeat;
            background-size: cover;
        }
        image:last-child {
            margin-right: 0;
        }
    }
}
</style>
